<template>
  <div class="login-container"
       style="background-image: linear-gradient(to right, #f8a4f1, #6ea1f5);height: 100vh;background-size: 1880px 1100px">
    <div class="accon-box">
      <div class="formtable">
        <!-- 根标签 -->
        <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">

          <el-form-item  label="账号" prop="username">
            <el-input prefix-icon="el-icon-user" v-model.number="form.username"></el-input>
          </el-form-item>

          <el-form-item  label="昵称" prop="nickname">
            <el-input prefix-icon="el-icon-user" v-model.number="form.nickname"></el-input>
          </el-form-item>

          <el-form-item  label="密码" prop="password">
            <el-input prefix-icon="el-icon-lock" type="password" v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="确认密码" prop="checkPass">
            <el-input prefix-icon="el-icon-lock" type="password" v-model="form.checkPass" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item class="btn">
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
            <el-button type="info" @click="resetForm('form')">重置</el-button>
            <el-button style="margin-left: 72px" type="danger" @click="($router.push('/login'))">返回登录页</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {

    var validatePass = (rule, value, callback) => {
      //rule:password的详细信息，value：password的值，callback:如果都不满足，则正常提交
      if (value === "") {
        callback(new Error("请输入密码"));//输入为空的提示信息
      } else {
        if (this.form.checkPass !== "") {
          this.$refs.form.validateField("checkPass");//如果确认密码不为空，则去validatePass2这个函数
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    }
    return {
      form: {
        username: "",
        nickname: "",
        password: "",
        checkPass: "",
      },
      rules: {
        username: [{required: true, message: "请输入账号", trigger: "blur"}],//校验规则：必填、信息提示、失去焦点
        nickname: [{required: true, message: "请输入昵称", trigger: "blur"}],
        password: [{validator: validatePass, trigger: "blur"}],
        checkPass: [{validator: validatePass2, trigger: "blur"}],
      },
    };
  },
  methods: {
    submitForm(formName) {
      console.log(formName)
      console.log(this.form)
      // this.$refs.form.validate((valid) => {
      this.$refs[formName].validate((valid) => {

        if (valid) {
          console.log('提交成功')
        } else {
          console.log("提交失败!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();

    }
  }
}


</script>

<style scoped>
.accon-box {

  width: 450px;
  height: 338px;
  background-color: #fff;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 3px -3px 20px #8a8989;

}

.formtable {
  padding: 20px;

}
.demo-ruleForm{
  margin-left: -26px;
}
</style>
